<template>
  <!-- 使用插槽 -->
  <waike title="index"  >
    <template #tab_slot>
      <!-- 顶部导航栏-->
      <van-tabs @click="active_recommend($event)" class="index-tabs" v-model="activetab" swipeable>
        <van-tab title="关注" name="attention"></van-tab>
        <van-tab title="推荐" name="recommend"></van-tab>
        <van-tab title="分类" name="sort"></van-tab>
      </van-tabs>
    </template>
    <template>
        <h4 style="text-align:left;margin:0.5rem 1rem">为你推荐</h4>
        <!-- 内容 -->
        <!-- 弹性布局容器 -->
        <div class="cont_box">
          <div class="context" v-for="(item,i) in articles" :key="i" >
            <router-link :to="`/cookbook?aid=${item.aid}`">
            <div>
                <img :src="item.first_pic" alt="" class="first_pic">
                <h5 class="title">{{item.title}}</h5>
                <div>
                  <van-image class="cont_avatar" round width="1.2rem" height="1.2rem"
                  src="https://img01.yzcdn.cn/vant/cat.jpeg"/>
                  <!-- 用户名 -->
                  <h6 class="cont_name">蜂蜜四叶草</h6>
                </div>
            </div>
            </router-link>
          </div>
        </div>
        <!-- 底部导航 -->
        <van-tabbar v-model="active_bar" active-color="#ee0a24">
        <van-tabbar-item name="home" icon="home-o" to="/">首页</van-tabbar-item>
        <van-tabbar-item name="collection" icon="star-o" to="/collection">收藏</van-tabbar-item>
        <van-tabbar-item name="me" icon="friends-o" to="/me">我的</van-tabbar-item>
        </van-tabbar>
    </template>
  </waike>
</template>
<script>
//引入外壳组件
import waike from "../components/waike.vue";
export default {
  components:{waike},
  data() {
    return {
      activetab:"recommend",
      active_bar:'home',
      articles:[],
    };
  },
  methods: {
    active_recommend(e){
      if(e=="attention"){
        // this.activeName="recommend";
        this.$router.push("/attention");
      }else if(e=="sort"){
        // this.activeName="sort";
        this.$router.push("/sort");
      }
    },
    
  },
  mounted(){
    this.axios.get('/article/lists').then(result=>{
      this.articles=result.data.result;
      // console.log(this.articles)
    });
  }
}
</script>

<style scoped>
/* 内容 */
body {
  font-family: Helvetica;
  /* Centering & Limit Width */
  margin: auto;
  width: 720px;
}
.cont_box{
    display:flex;
    /* justify-content: space-around; */
    flex-wrap: wrap;
    padding: 0.5rem;
}
.context{
    /* border: 1px solid #999; */
    width: 47%;
    height: 16.5rem;
    margin-bottom: 0.5rem;
    padding: 0 0.3rem;
}
.first_pic{
    width:100%; height:12rem;
    object-fit:cover;
    border-radius: 0.8rem;
}
.title{
    margin:0; text-align:left;
    overflow: hidden;
    height: 2.2rem;
    color: #333;
}
.cont_avatar{
    position:relative; 
    top:0.5rem; left:-4.5rem;
}
.cont_name{
    position:relative; 
    top:-1rem; left:-1.7rem;
    margin: 0;
    color: #999;
}
</style>
